$(document).ready(function(){					
	var canvas = document.getElementById('canvas');//画布
	var stage = new JTopo.Stage(canvas);//舞台
	var scene = new JTopo.Scene(stage);//场景
	//显示工具栏 showJTopoToobar(stage);
	scene.background = './img/bg.jpg';//场景背景图片
	stage.add(scene);
	
	stage.frames = 24;//运动
	
	var animates = [
        {rotate: 2*Math.PI}, //旋转
        {scaleX: 2},// 宽度放大 倍数
        {height:130, y: 180},//高度修改
        {alpha: 0.1},//透明度修改
        {alpha: 0.2, y: 90},//透明度及Y轴偏移量
        {rotate: -4*Math.PI, scaleX: 2.5, scaleY: 2.5},//旋转,放大.
        {x: 300, y: 400, width: 10, height: 10, rotate: 2*Math.PI}//旋转,修改长宽及位置
    ];
    
    
    for(var i=0; i<animates.length; i++){
        var node = new JTopo.Node("node_" + i);
        node.setCenterLocation(100 + i * 90, 300);
        var color = JTopo.util.randomColor();
        node.fillColor = color; // 颜色                
        scene.add(node);
        
        JTopo.Animate.stepByStep(node, animates[i], 3000, true).start();    
    }
    
    function myNode(text, x, y){
        var node = new JTopo.Node(text);
        node.percent = 0.8;
        node.beginDegree = 0;
        node.width = node.height = 70;
        node.setLocation(x, y);
        node.textPosition = "Middle_Center";
        node.paint = function(g){
            g.save();
            g.beginPath();
            g.moveTo(0,0);
            g.fillStyle = 'rgba(0,255,0,' + this.alpha + ')';
            g.arc(0, 0, this.width/2, this.beginDegree, this.beginDegree + 2*Math.PI*this.percent);
            g.fill();                
            g.closePath();
            
            g.beginPath();
            g.fillStyle = 'rgba(0,0,255,' + this.alpha + ')';
            g.moveTo(0,0);
            g.arc(0, 0, this.width/2-8, this.beginDegree, this.beginDegree + 2*Math.PI);                
            g.fill();
            g.closePath(); 
            
            g.restore();                            
            this.paintText(g);
        };
        scene.add(node);
        return node;
    }
    var node1 = myNode('自定义1',355, 151);
    node1.percent = 0.1;
    
    JTopo.Animate.stepByStep(node1, {percent: 1}, 5000, true).start();    
    
    var node2 = myNode('自定义2',155, 151);
    JTopo.Animate.stepByStep(node2, {beginDegree: 2*Math.PI}, 3000, true).start(); 
    
});
	